<template>
<view class="viewport">
<!-- 活动封面 -->
<view class="activity-header">
<swiper v-if="activityDetail.activityImage" class="swiper" indicator-dots
indicator-color="rgba(255, 255, 255, 0.4)" indicator-active-color="#35c8a9" autoplay interval="5000"
duration="500">
<swiper-item>
<image class="image" mode="aspectFill" :src="activityDetail.activityImage" />
</swiper-item>
</swiper>

<!-- 活动基本信息 -->
<view class="activity-info">
<view class="title">{{ activityDetail.title }}</view>
<view class="location">
<text class="icon">📍</text>
{{ activityDetail.location }}
</view>
<view class="participants">
<text class="icon">👥</text>
已报名 {{ activityDetail.currentParticipants || 0 }} / {{ activityDetail.maxParticipants }} 人
</view>
</view>
</view>

<!-- Tabs -->
<view class="tabs">
<text class="item" v-for="(item, index) in tabList" :key="item.title" :class="{ active: activeTab === index }"
@tap="activeTab = index">
{{ item.title }}
</text>

<!-- 游标 -->
<view class="cursor" :style="{ left: activeTab * 33.33 + '%' }"></view>
</view>

<!-- Tab 内容 -->
<swiper class="tab-content" :current="activeTab" @change="activeTab = $event.detail.current">
<!-- 详情 -->
<swiper-item>
<scroll-view scroll-y class="content-scroll">
<view class="detail-content">
<view class="section">
<view class="section-title">活动描述</view>
<view class="section-content">
{{ activityDetail.description || '暂无描述' }}
</view>
</view>

<view class="section">
<view class="section-title">参与须知</view>
<view class="section-content">
<view class="notice-item">1. 请准时参加活动，如有特殊情况请提前请假</view>
<view class="notice-item">2. 请穿着适合户外活动的服装和鞋子</view>
<view class="notice-item">3. 活动期间请注意安全，听从组织者安排</view>
<view class="notice-item">4. 请自备饮用水和必要的个人物品</view>
<view class="notice-item">5. 如遇恶劣天气，活动可能延期，请关注通知</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>

<!-- 信息 -->
<swiper-item>
<scroll-view scroll-y class="content-scroll">
<view class="info-content">
<view class="info-item">
<text class="label">活动状态：</text>
<text class="value" :class="getStatusClass(activityDetail.status)">
{{ getStatusText(activityDetail.status) }}
</text>
</view>
<view class="info-item">
<text class="label">关联树木：</text>
<text class="value">编号 {{ activityDetail.treeId }}</text>
</view>

<view class="section">
<view class="section-title">活动时间</view>
<view class="time-item">
<text class="label">开始时间：</text>
<text class="value">{{ formatDateTime(activityDetail.startTime) }}</text>
</view>
<view class="time-item">
<text class="label">结束时间：</text>
<text class="value">{{ formatDateTime(activityDetail.endTime) }}</text>
</view>
</view>

<view class="section">
<view class="section-title">报名时间</view>
<view class="time-item">
<text class="label">开始时间：</text>
<text class="value">{{ formatDateTime(activityDetail.registrationStartTime) }}</text>
</view>
<view class="time-item">
<text class="label">截止时间：</text>
<text class="value">{{ formatDateTime(activityDetail.registrationEndTime) }}</text>
</view>
</view>

<view class="section">
<view class="section-title">活动类型</view>
<view class="type-badge">
{{ getActivityTypeName(activityDetail.activityType) }}
</view>
</view>
</view>
</scroll-view>
</swiper-item>

<!-- 人员 -->
<swiper-item>
<scroll-view scroll-y class="content-scroll">
<view class="participants-content">
<!-- 添加二维码展示区域 -->
<!-- <view v-if="isActivityCreator" class="qr-section"> -->
<view v-if="true" class="qr-section">

<view class="qr-container" @tap="showQRCode">
<view class="qr-placeholder">
<text class="qr-icon">🔲</text>
<text class="qr-text">点击查看二维码</text>
</view>
</view>
</view>
<view class="participants-count">
报名人数：{{ activityDetail.currentParticipants || 0 }} / {{ activityDetail.maxParticipants }} 人
</view>

<view class="participants-list">
<view class="participant-item" v-for="(participant, index) in participantsList" :key="index">
<view class="participant-avatar">
<image v-if="participant.avatar" :src="participant.avatar" mode="aspectFill" class="avatar-image" />
<view v-else class="default-avatar">
{{ participant.nickname?.substring(0, 1) || 'U' }}
</view>
</view>
<view class="participant-info">
<view class="participant-name">{{ participant.nickname || '匿名用户' }}</view>
<!-- 这里缺少报名时间信息，API未提供 -->
</view>
</view>

<view v-if="participantsList.length === 0" class="no-participants">
暂无报名人员
</view>
</view>
</view>
</scroll-view>
</swiper-item>

<!-- 地址 -->
<swiper-item>
<scroll-view scroll-y class="content-scroll">
<view class="address-content">
<view class="address-info">
<view class="address-text">{{ activityDetail.location }}</view>
<button class="navigation-btn" @tap="openMap">
<text class="icon">🧭</text>
导航前往
</button>
</view>

<view class="map-container">
<!-- 这里可以集成地图组件 -->
<view class="map-placeholder">
<text class="map-icon">🗺️</text>
<text class="map-text">地图位置展示区域</text>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>


<!-- 二维码弹窗 -->
<view v-if="showQRModal" class="qr-modal" @tap="closeQRModal">
<view class="qr-modal-content" @tap.stop>
<view class="qr-modal-title">活动管理二维码</view>
<view class="qr-code-display">
<!-- 实际项目中这里应该显示真实的二维码 -->
<view class="qr-code-placeholder">
<image
:src="activityDetail.qrcodeUrl"
mode="aspectFit"
class="qr-image"
/>
</view>
</view>
<view class="qr-actions">
<button class="qr-action-btn save-btn" @tap="saveQRCode">保存二维码</button>
<button class="qr-action-btn close-btn" @tap="closeQRModal">关闭</button>
</view>
</view>
</view>


<!-- 底部操作按钮 -->
<view class="footer-actions">
<button class="action-btn join-btn" :class="getJoinButtonClass()" @tap="joinActivity">
{{ getJoinButtonText() }}
</button>
</view>
</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getActivityDetailAPI, signUpVoluntaryAPI } from '@/services/voluntary'


// 添加新状态
const isActivityCreator = ref(false) // 是否为活动创建者
const showQRModal = ref(false) // 是否显示二维码弹窗


// 显示二维码
const showQRCode = () => {
showQRModal.value = true
// 实际项目中应该调用后端接口获取二维码信息
}

// 关闭二维码弹窗
const closeQRModal = () => {
showQRModal.value = false
}

// 修改 onLoad 函数以判断是否为活动创建者
onLoad(async (options) => {
if (options && options.id) {
// 根据 id 获取活动详情
const result = await getActivityDetailAPI(options.id)

activityDetail.value = result.data

// 处理志愿者列表
if (result.data.volunteers) {
participantsList.value = result.data.volunteers
}

// 判断当前用户是否为活动创建者
// 这里需要根据实际的API返回数据结构调整
// 假设活动详情中包含创建者ID字段
if (result.data.creatorId) {
// 需要获取当前用户ID进行比较
// 示例中假设当前用户ID为1（实际应从用户信息中获取）
const currentUserId = 1 // 这应该从全局用户状态中获取
isActivityCreator.value = (result.data.creatorId === currentUserId)
}

// 如果没有creatorId字段，可以通过其他方式判断
// 例如通过活动ID在申报活动中查找
}
})



// 活动类型选项
const activityTypes = [
{ id: 1, name: '监测' },
{ id: 2, name: '维护' },
{ id: 3, name: '清洁' },
{ id: 4, name: '宣传' }
]

// 活动状态映射
const statusMap = {
1: '招募中',
2: '进行中',
3: '已完成'
}

// Tabs 数据
/* const tabList = ref([
{ title: '详情' },
{ title: '信息' },
{ title: '人员' },
{ title: '地址' }
]) */

const tabList = ref([
{ title: '详情' },
{ title: '信息' },
{ title: '人员' }
])

// 当前激活的 Tab
const activeTab = ref(0)

// 活动详情数据
const activityDetail = ref({
activityId: null,
treeId: null,
title: '',
description: '',
activityType: null,
status: null,
startTime: '',
endTime: '',
location: '',
maxParticipants: 0,
currentParticipants: 0,
activityImage: '',
registrationStartTime: '',
registrationEndTime: '',
qrcodeUrl:''
})

// 参与人员列表
const participantsList = ref([])

// 用户是否已报名
const isJoined = ref(false)

// 获取活动类型名称
const getActivityTypeName = (typeId) => {
const type = activityTypes.find(item => item.id === typeId)
return type ? type.name : '未知类型'
}

// 获取状态文本
const getStatusText = (status) => {
return statusMap[status] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status) => {
switch (status) {
case 1: return 'status-recruiting' // 招募中
case 2: return 'status-processing' // 进行中
case 3: return 'status-finished' // 已完成
default: return ''
}
}

// 格式化日期时间显示
const formatDateTime = (dateTimeString) => {
if (!dateTimeString) return ''
const date = new Date(dateTimeString)
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
const hours = date.getHours().toString().padStart(2, '0')
const minutes = date.getMinutes().toString().padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 检查当前是否在报名时间内
const isWithinRegistrationPeriod = () => {
const now = new Date()
const registrationStart = new Date(activityDetail.value.registrationStartTime)
const registrationEnd = new Date(activityDetail.value.registrationEndTime)

return now >= registrationStart && now <= registrationEnd
}

// 获取报名按钮的文本
const getJoinButtonText = () => {
if (isJoined.value) {
return '已报名'
}

if (activityDetail.value.status !== 1) {
return '活动不在招募中'
}

if (!isWithinRegistrationPeriod()) {
const now = new Date()
const registrationStart = new Date(activityDetail.value.registrationStartTime)

if (now < registrationStart) {
return '报名未开始'
} else {
return '报名已结束'
}
}

return '报名参加'
}

// 获取报名按钮的样式类
const getJoinButtonClass = () => {
if (isJoined.value) {
return 'disabled'
}

// 只有在招募中状态且在报名时间内才启用按钮
if (activityDetail.value.status === 1 && isWithinRegistrationPeriod()) {
return '' // 启用状态，使用默认的绿色样式
}

return 'disabled' // 禁用状态，使用灰色样式
}

// 报名参加活动
// 报名参加活动
const joinActivity = async () => {
if (isJoined.value) {
uni.showToast({
title: '您已报名参加此活动',
icon: 'none'
})
return
}

if (activityDetail.value.status !== 1) {
uni.showToast({
title: '活动不在招募中状态',
icon: 'none'
})
return
}

if (!isWithinRegistrationPeriod()) {
const now = new Date()
const registrationStart = new Date(activityDetail.value.registrationStartTime)

if (now < registrationStart) {
uni.showToast({
title: '报名尚未开始',
icon: 'none'
})
} else {
uni.showToast({
title: '报名已结束',
icon: 'none'
})
}
return
}

try {
// 调用报名接口
console.log('报名活动ID:', activityDetail.value.activityId)
const result = await signUpVoluntaryAPI(activityDetail.value.activityId)

if (result.code === 1) {
isJoined.value = true
uni.showToast({
title: '报名成功',
icon: 'success'
})
// 可选：刷新活动详情以更新报名人数
await refreshActivityDetail()
} else {
// 处理业务逻辑错误
uni.showModal({
title: '报名失败',
content: result.msg || '报名失败，请稍后重试',
showCancel: false,
confirmColor: '#35c8a9'
})
}
} catch (error) {
// 处理网络请求异常
uni.showModal({
title: '请求失败',
content: error.message || '网络请求异常，请稍后重试',
showCancel: false,
confirmColor: '#35c8a9'
})
}
}


const refreshActivityDetail = async () => {
// 重新调用API获取最新的活动详情
const result = await getActivityDetailAPI(activityDetail.value.activityId)

// 更新活动详情数据
activityDetail.value = result.data

// 更新参与者列表
if (result.data.volunteers) {
participantsList.value = result.data.volunteers
}
}


// 打开地图导航
const openMap = () => {
uni.showToast({
title: '打开地图导航',
icon: 'none'
})
// 这里可以调用地图导航接口
}

// 接收页面参数
onLoad(async (options) => {
if (options && options.id) {
// 根据 id 获取活动详情
const result = await getActivityDetailAPI(options.id)

activityDetail.value = result.data

// 处理志愿者列表
if (result.data.volunteers) {
participantsList.value = result.data.volunteers
}
}
})
// 保存二维码到本地
const saveQRCode = () => {
const qrCodeUrl = activityDetail.value.qrcodeUrl

uni.downloadFile({
url: qrCodeUrl,
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({
title: '二维码已保存到相册',
icon: 'success'
})
},
fail: (err) => {
console.error('保存失败:', err)
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
},
fail: (err) => {
console.error('下载失败:', err)
uni.showToast({
title: '下载失败',
icon: 'none'
})
}
})
}

</script>

<style lang="scss">
.viewport {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #f5f5f5;
}

/* 活动封面 */
.activity-header {
position: relative;

.swiper {
width: 100%;
height: 400rpx;
}

.image {
width: 100%;
height: 100%;
}

.activity-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
color: #fff;

.title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
}

.location,
.participants {
font-size: 24rpx;
margin-bottom: 5rpx;
display: flex;
align-items: center;

.icon {
margin-right: 10rpx;
}
}
}
}

/* Tabs */
.tabs {
display: flex;
justify-content: space-around;
background-color: #fff;
position: relative;
z-index: 9;
box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

.item {
flex: 1;
text-align: center;
padding: 20rpx 0;
font-size: 28rpx;
color: #666;

&.active {
color: #35c8a9;
font-weight: bold;
}
}

.cursor {
position: absolute;
bottom: 0;
width: 25%;
height: 6rpx;
background-color: #35c8a9;
transition: all 0.3s;
}
}

/* Tab 内容 */
.tab-content {
flex: 1;

.content-scroll {
height: 100%;
}
}

/* 详情内容 */
.detail-content {
padding: 30rpx;

.section {
background-color: #fff;
border-radius: 15rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.section-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 15rpx;
padding-bottom: 10rpx;
border-bottom: 1rpx solid #eee;
}

.section-content {
font-size: 26rpx;
color: #666;
line-height: 1.6;
}

.notice-item {
margin-bottom: 10rpx;
padding-left: 20rpx;
position: relative;

&::before {
content: "";
position: absolute;
left: 0;
top: 12rpx;
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background-color: #35c8a9;
}
}
}
}

/* 信息内容 */
.info-content {
padding: 30rpx;

.info-item {
background-color: #fff;
border-radius: 15rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
display: flex;

.label {
width: 150rpx;
font-size: 26rpx;
color: #666;
}

.value {
flex: 1;
font-size: 26rpx;
color: #333;

&.status-recruiting {
color: #ff6b6b;
}

&.status-processing {
color: #4ecdc4;
}

&.status-finished {
color: #888;
}
}
}

.section {
background-color: #fff;
border-radius: 15rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.section-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 15rpx;
padding-bottom: 10rpx;
border-bottom: 1rpx solid #eee;
}

.time-item {
display: flex;
margin-bottom: 10rpx;

.label {
width: 150rpx;
font-size: 26rpx;
color: #666;
}

.value {
flex: 1;
font-size: 26rpx;
color: #333;
}
}

.type-badge {
display: inline-block;
padding: 8rpx 20rpx;
background-color: #e8f4f3;
color: #2a9d8f;
border-radius: 30rpx;
font-size: 24rpx;
}
}
}

/* 人员内容 */
.participants-content {
padding: 30rpx;

.participants-count {
background-color: #fff;
border-radius: 15rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
font-size: 28rpx;
font-weight: bold;
color: #333;
text-align: center;
}

.participant-item {
background-color: #fff;
border-radius: 15rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;

.participant-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 20rpx;

.avatar-image {
width: 100%;
height: 100%;
}

.default-avatar {
width: 100%;
height: 100%;
background-color: #35c8a9;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-weight: bold;
}
}

.participant-info {
flex: 1;

.participant-name {
font-size: 28rpx;
color: #333;
margin-bottom: 10rpx;
}

.participant-time {
font-size: 24rpx;
color: #999;
}
}
}

.no-participants {
text-align: center;
padding: 50rpx;
color: #999;
font-size: 28rpx;
}
}

/* 地址内容 */
.address-content {
padding: 30rpx;

.address-info {
background-color: #fff;
border-radius: 15rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.address-text {
font-size: 26rpx;
color: #333;
margin-bottom: 20rpx;
line-height: 1.5;
}

.navigation-btn {
background: linear-gradient(45deg, #35c8a9, #2a9d8f);
color: #fff;
border: none;
border-radius: 50rpx;
padding: 15rpx 30rpx;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;

.icon {
margin-right: 10rpx;
}
}
}

.map-container {
background-color: #fff;
border-radius: 15rpx;
padding: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.map-placeholder {
height: 400rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f9f9f9;
border-radius: 10rpx;

.map-icon {
font-size: 60rpx;
margin-bottom: 20rpx;
}

.map-text {
color: #999;
font-size: 28rpx;
}
}
}
}

/* 底部操作按钮 */
.footer-actions {
padding: 20rpx 30rpx;
background-color: #fff;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

.action-btn {
width: 100%;
border: none;
border-radius: 50rpx;
padding: 20rpx 0;
font-size: 30rpx;
font-weight: bold;

&.join-btn {
background: linear-gradient(45deg, #35c8a9, #2a9d8f);
color: #fff;
}

&.disabled {
background: #ccc;
color: #999;
}
}
}
</style>